<template>
    <div>
        <Ex28>
            <!-- 默认插槽 -->
            <template v-slot:default="message">
                <p>在这里放插槽内容,就会把这个p标签丢到子组件的  默认插槽  中显示出来 {{ message }}</p>
            </template>
    
            <!-- 具名插槽 -->
            <template v-slot:center="message">
                <p>在这里放插槽内容,就会把这个p标签丢到子组件的  具名插槽  中显示出来:{{message}}</p>
            </template>

            <!-- 作用域插槽           这里是解构写法 （也可以写）zuoyongyu="scoped"  然后下面{{scoped.shuju}}-->
            <!-- <template v-slot:zuoyongyu="{ shuju }">
                <p>作用域插槽:{{shuju}}</p>
            </template> -->
            <!-- 下面是上面作用域插槽的简写 -->
            <template #zuoyongyu="{ shuju }">
                <p>作用域插槽:{{shuju}}</p>
            </template>
            
        </Ex28>
    </div>
</template>

<script setup>
/**
 *  vue3 组件插槽slots
 *      作用：
 *          为了让我们在封装组件的时候，可以向组件内部传入结构     
 * 
 *      <slot></slot>  默认插槽
 *      <slot name="header"></slot>  具名插槽   
 *      <slot :user="user"></slot>  作用域插槽 :把子组件的数据传递给插槽
 *          步骤：
 *              1. 子组件中定义插槽的时候，添加自定义属性<slot name="zuoyongyu" :shuju="message"></slot>
 *              2. 调用子组件的位置使用template接收，slot传入数据，v-slot:名字="所有传入数据的集合"
 *  使用场景：
 *      模态框组件（弹窗）
 *      列表组件（渲染列表）
 */
import { ref } from 'vue'
//导入子组件
import Ex28 from './Ex28-Slots子组件.vue'

//定义数据  确定到底是不是子组件的数据
const message = ref('我是父组件Hello') // 用于传递给子组件作用域插槽


</script>


<style scoped>
    
</style>
